<template>
  <div class="row">
      <div v-for="column in columnList" :key="column.id" class="col-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <img :src="column.avatar" class="rounded-circle border border-line w-25 my-3" :alt="column.title">
                <h5 class="card-title">{{column.title}}</h5>
                <p class="card-text text-left">{{column.description}}</p>
                <a href="#" class="btn btn-outline-primary" @click.prevent="goDetailColumn(column.id)">进入专栏</a>
            </div>
        </div>

      </div>


      
  </div>
</template>

<script lang="ts">
import {computed, defineComponent,PropType} from 'vue'
import {useRouter} from 'vue-router'

export interface ColumnListPros {
    id: number,
    title: string,
    avatar?: string, // 设为可选
    description: string
}
export default defineComponent({
    name: 'ColumnList',
    props: {
        list: {
            type: Array as PropType<ColumnListPros[]>,
            required: true
        }
    },
    setup(props) {
        const router = useRouter()
        // props.list[0].id
      
        const goDetailColumn = (id:number) => {
            console.log('进入详情',id);
            
            router.push({
                path:'/columnDetail',
                query: {
                    id: id
                }
                // params: {
                //     id: id
                // }
            })
            
        }
        const columnList = computed(() => {
            return props.list.map(column => {
                if (!column.avatar) {
                    column.avatar = require('@/assets/logo.png')
                }
                return column
            })
        })
        return {
            columnList,
            goDetailColumn
            }
    }
})
</script>

<style>

</style>